<template>
  <div class="tooling-ledger-container">
    <div class="search-form" v-show="showSearchForm">
      <el-form :inline="true" :model="form" class="filter-form">
        <el-form-item label="工装夹具编码">
          <el-input v-model="form.code" placeholder="请输入工装夹具编码" clearable />
        </el-form-item>
        <el-form-item label="工装夹具名称">
          <el-input v-model="form.name" placeholder="请输入工装夹具名称" clearable />
        </el-form-item>
        <el-form-item label="工装夹具类型">
          <el-select v-model="form.type" placeholder="请选择类型" clearable>
            <el-option label="轮子" value="轮子" />
            <el-option label="手机" value="手机" />
            <el-option label="挤出机" value="挤出机" />
            <el-option label="三爪卡盘" value="三爪卡盘" />
          </el-select>
        </el-form-item>
        <el-form-item label="品牌">
          <el-input v-model="form.brand" placeholder="请输入品牌" clearable />
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="form.model" placeholder="请输入型号" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.isStatus" placeholder="请选择状态" clearable>
            <el-option label="在库" :value="1" />
            <el-option label="被领用" :value="2" />
            <el-option label="报废" :value="3" />
            <el-option label="维修中" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>搜索
          </el-button>
          <el-button @click="resetForm">
            <el-icon><Refresh /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮 -->
    <div class="table-operations">
      <el-button type="primary" plain @click="openDialog('add')">
        <el-icon><Plus /></el-icon>新增
      </el-button>
      <el-button type="success" plain disabled>
        <el-icon><Edit /></el-icon>修改
      </el-button>
      <el-button type="danger" plain disabled>
        <el-icon><Delete /></el-icon>删除
      </el-button>
      <el-button type="warning" plain @click="exportToExcel">
        <el-icon><Download /></el-icon>导出{{ selectedRows?.length ? `(${selectedRows.length}条)` : '' }}
      </el-button>
    </div>

    <!-- 表格 -->
    <div class="table-wrapper full-width-table">
      <div class="table-header-actions-flex">
        <div class="table-header-actions">
          <el-button
            circle
            size="large"
            @click="showSearchForm = !showSearchForm"
            :title="showSearchForm ? '收起查询' : '展开查询'"
          >
            <el-icon><Search /></el-icon>
          </el-button>
          <el-button
            circle
            size="large"
            @click="getTableData()"
            title="刷新"
          >
            <el-icon><Refresh /></el-icon>
          </el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        stripe
        highlight-current-row
        style="width: 100%"
        size="default"
        class="ledger-table"
        @selection-change="handleSelectionChange"
        :header-cell-style="{
          background: '#fafafa',
          color: '#606266',
          height: '44px',
          fontSize: '14px'
        }"
        :cell-style="{
          fontSize: '14px',
          padding: '8px 0',
          color: '#606266'
        }"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="code" label="编号" min-width="100" align="center" />
        <el-table-column prop="name" label="名称" min-width="120" align="center">
          <template #default="scope">
            <el-link type="primary" :underline="false" @click="openViewDialog(scope.row)">
              {{ scope.row.name }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="brand" label="品牌" min-width="100" align="center" />
        <el-table-column prop="model" label="型号" min-width="100" align="center" />
        <el-table-column prop="type" label="类型" min-width="100" align="center" />
        <el-table-column prop="inventoryQuantity" label="库存数量" min-width="100" align="center" />
        <el-table-column prop="availableQuantity" label="可用数量" min-width="100" align="center" />
        <el-table-column prop="maintenanceType" label="保养维护类型" min-width="120" align="center" />
        <el-table-column prop="nextMaintenanceDate" label="下次保养日期" min-width="120" align="center">
          <template #default="scope">
            {{ scope.row.nextMaintenanceDate?.substring(0, 10) || '' }}
          </template>
        </el-table-column>
        <el-table-column prop="isStatus" label="状态" min-width="80" align="center">
          <template #default="scope">
            <el-tag
              :type="getStatusType(scope.row.isStatus)"
              effect="plain"
              size="small"
              style="min-width: 60px"
            >
              {{ getStatusText(scope.row.isStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120" align="center" fixed="right">
          <template #default="scope">
            <el-link
              type="primary"
              :underline="false"
              class="operation-link"
              @click="openDialog('edit', scope.row)"
            >修改</el-link>
            <el-divider direction="vertical" />
            <el-link
              type="danger"
              :underline="false"
              class="operation-link"
              @click="handleDelete(scope.row)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pager-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加工装夹具清单' : '编辑工装夹具清单'"
      width="900px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="tooling-dialog"
      @closed="handleDialogClosed"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
        class="tooling-form"
      >
        <div class="form-section">
          <div class="section-title">基本信息</div>
          <div class="section-content">
            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="工装夹具编号" prop="code">
                  <el-input
                    v-model="formData.code"
                    placeholder="请输入工装夹具编号"
                    :disabled="true"
                  >
                    <template #append v-if="dialogType === 'add'">
                      <el-switch
                        v-model="autoGenerate"
                        active-text="自动生成"
                        :loading="isGenerating"
                        :disabled="isGenerating"
                        style="margin-right: 8px;"
                        @change="handleAutoGenerateChange"
                      />
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工装夹具名称" prop="name">
                  <el-input v-model="formData.name" placeholder="请输入工装夹具名称" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="工装夹具类型" prop="type">
                  <el-select v-model="formData.type" placeholder="请选择类型" class="full-width">
                    <el-option label="轮子" value="轮子" />
                    <el-option label="手机" value="手机" />
                    <el-option label="挤出机" value="挤出机" />
                    <el-option label="三爪卡盘" value="三爪卡盘" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="型号" prop="model">
                  <el-input v-model="formData.model" placeholder="请输入型号" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="品牌" prop="brand">
                  <el-input v-model="formData.brand" placeholder="请输入品牌" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态" prop="isStatus">
                  <el-radio-group v-model="formData.isStatus" class="status-group" disabled>
                    <el-radio :label="1">在库</el-radio>
                    <el-radio :label="2">被领用</el-radio>
                    <el-radio :label="3">报废</el-radio>
                    <el-radio :label="4">维修中</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="form-section-row">
          <div class="form-section-col">
            <div class="section-title">数量信息</div>
            <div class="section-content">
              <el-form-item label="库存数量" prop="inventoryQuantity">
                <el-input-number
                  v-model="formData.inventoryQuantity"
                  :min="0"
                  controls-position="right"
                  class="full-width"
                />
              </el-form-item>
              <el-form-item label="可用数量" prop="availableQuantity">
                <el-input-number
                  v-model="formData.availableQuantity"
                  :min="0"
                  controls-position="right"
                  class="full-width"
                />
              </el-form-item>
            </div>
          </div>

          <div class="form-section-col">
            <div class="section-title">维护信息</div>
            <div class="section-content">
              <el-form-item label="维护类型" prop="maintenanceType">
                <el-select v-model="formData.maintenanceType" placeholder="请选择维护类型" class="full-width">
                  <el-option label="定期维护" value="定期维护" />
                  <el-option label="按使用次数维护" value="按使用次数维护" />
                </el-select>
              </el-form-item>
              <el-form-item label="保养日期" prop="nextMaintenanceDate">
                <el-date-picker
                  v-model="formData.nextMaintenanceDate"
                  type="date"
                  placeholder="请选择保养日期"
                  class="full-width"
                />
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="查看工装夹具信息"
      width="900px"
      :close-on-click-modal="false"
      class="tooling-dialog"
    >
      <el-form
        :model="viewForm"
        label-width="120px"
        class="tooling-form"
        disabled
      >
        <div class="form-section">
          <div class="section-title">基本信息</div>
          <div class="section-content">
            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="工装夹具编号">
                  <el-input v-model="viewForm.code" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工装夹具名称">
                  <el-input v-model="viewForm.name" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="工装夹具类型">
                  <el-input v-model="viewForm.type" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="型号">
                  <el-input v-model="viewForm.model" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="品牌">
                  <el-input v-model="viewForm.brand" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态">
                  <el-radio-group v-model="viewForm.isStatus">
                    <el-radio :label="1">在库</el-radio>
                    <el-radio :label="2">被领用</el-radio>
                    <el-radio :label="3">报废</el-radio>
                    <el-radio :label="4">维修中</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="form-section-row">
          <div class="form-section-col">
            <div class="section-title">数量信息</div>
            <div class="section-content">
              <el-form-item label="库存数量">
                <el-input-number v-model="viewForm.inventoryQuantity" :min="0" controls-position="right" class="full-width" />
              </el-form-item>
              <el-form-item label="可用数量">
                <el-input-number v-model="viewForm.availableQuantity" :min="0" controls-position="right" class="full-width" />
              </el-form-item>
            </div>
          </div>

          <div class="form-section-col">
            <div class="section-title">维护信息</div>
            <div class="section-content">
              <el-form-item label="维护类型">
                <el-input v-model="viewForm.maintenanceType" />
              </el-form-item>
              <el-form-item label="保养日期">
                <el-date-picker
                  v-model="viewForm.nextMaintenanceDate"
                  type="date"
                  class="full-width"
                />
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import http from '@/api/http'
import { 
  Edit, 
  Delete, 
  Search, 
  Refresh,
  Plus,
  Download
} from '@element-plus/icons-vue'
import type { FormInstance, UploadFile } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'

// 定义表格数据类型
interface TableItem {
  code: string
  name: string
  brand: string
  model: string
  type: string
  inventoryQuantity: number
  availableQuantity: number
  maintenanceType: string
  nextMaintenanceDate: string
  isStatus: number
}

const tableData = ref<TableItem[]>([])
const total = ref(0)
const pageSize = ref(5)
const currentPage = ref(1)

interface ToolingForm {
  code: string
  name: string
  brand: string
  model: string
  type: string
  isStatus: string | number
}

const form = reactive<ToolingForm>({
  code: '',
  name: '',
  brand: '',
  model: '',
  type: '',
  isStatus: ''
})

const getTableData = () => {
  const url = `/api/ToolingFixtureLedgerService/GetList/GetToolingfixtureledgers?Code=${form.code || ''}&Name=${form.name || ''}&Brand=${form.brand || ''}&Model=${form.model || ''}&Type=${form.type || ''}&IsStatus=${form.isStatus || ''}&PageIndex=${currentPage.value}&PageSize=${pageSize.value}`

  http.get(url).then(res => {
    if (res && res.rows) {
      tableData.value = res.rows
      total.value = res.total
    } else {
      tableData.value = []
      total.value = 0
    }
  }).catch(error => {
    console.error('获取数据失败:', error)
    ElMessage.error('获取数据失败')
    tableData.value = []
    total.value = 0
  })
}

const handleSearch = () => {
  currentPage.value = 1 // 搜索时重置到第一页
  getTableData()
}

const resetForm = () => {
  form.code = ''
  form.name = ''
  form.brand = ''
  form.model = ''
  form.type = ''
  form.isStatus = ''
  currentPage.value = 1 // 重置页码
  getTableData()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  getTableData()
}
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  getTableData()
}

const getStatusType = (status: number) => {
  switch (status) {
    case 1:
      return 'success'
    case 2:
      return 'info'
    case 3:
      return 'danger'
    case 4:
      return 'warning'
    default:
      return ''
  }
}

const getStatusText = (status: number) => {
  switch (status) {
    case 1:
      return '在库'
    case 2:
      return '被领用'
    case 3:
      return '报废'
    case 4:
      return '维修中'
    default:
      return ''
  }
}

// 对话框相关
const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const formRef = ref<FormInstance>()
const autoGenerate = ref(false)
const isGenerating = ref(false)
const lastCode = ref('T00070')

// 表单数据
interface FormData {
  code: string
  name: string
  type: string
  model: string
  brand: string
  inventoryQuantity: number
  availableQuantity: number
  maintenanceType: string
  nextMaintenanceDate: string
  isStatus: number
}

const formData = reactive<FormData>({
  code: '',
  name: '',
  type: '',
  model: '',
  brand: '',
  inventoryQuantity: 0,
  availableQuantity: 0,
  maintenanceType: '定期维护',
  nextMaintenanceDate: '',
  isStatus: 1,
})

// 表单验证规则
const rules = {
  code: [{ required: true, message: '请输入工装夹具编号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入工装夹具名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择工装夹具类型', trigger: 'change' }],
  quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
  maintenanceType: [{ required: true, message: '请选择保养维护类型', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

// 获取最新编号
const getLatestCode = async () => {
  try {
    // 从表格数据中获取最新编号
    const res = await http.get('/api/ToolingFixtureLedgerService/GetList/GetToolingfixtureledgers', {
      page: 1,
      pageSize: 1,
      sortField: 'code',
      sortOrder: 'desc'
    })
    
    if (res && res.rows && res.rows.length > 0) {
      const latestCode = res.rows[0].code || lastCode.value
      lastCode.value = latestCode
    }
    return true
  } catch (error) {
    console.error('获取最新编号失败:', error)
    return false
  }
}

// 生成新编号
const generateNewCode = () => {
  try {
    const numPart = parseInt(lastCode.value.substring(1))
    if (isNaN(numPart)) {
      return 'T00001'
    }
    return `T${(numPart + 1).toString().padStart(5, '0')}`
  } catch (error) {
    console.error('生成编号失败:', error)
    return 'T00001'
  }
}

// 处理自动生成开关变化
const handleAutoGenerateChange = async (val: boolean) => {
  if (val) {
    isGenerating.value = true
    try {
      const success = await getLatestCode()
      if (success) {
        formData.code = generateNewCode()
      } else {
        ElMessage.error('获取最新编号失败')
        autoGenerate.value = false
        formData.code = ''
      }
    } catch (error) {
      console.error('生成编号失败:', error)
      ElMessage.error('生成编号失败')
      autoGenerate.value = false
      formData.code = ''
    } finally {
      isGenerating.value = false
    }
  } else {
    formData.code = ''
  }
}


// 打开对话框
const openDialog = async (type: 'add' | 'edit', row?: any) => {
  dialogType.value = type
  dialogVisible.value = true
  
  if (type === 'add') {
    resetFormData()
    // 默认关闭自动生成
    autoGenerate.value = false
    formData.code = ''
  } else if (type === 'edit' && row) {
    Object.assign(formData, row)
    autoGenerate.value = false
  }
}

// 重置表单数据
const resetFormData = () => {
  formData.code = ''
  formData.name = ''
  formData.type = ''
  formData.model = ''
  formData.brand = ''
  formData.inventoryQuantity = 0
  formData.availableQuantity = 0
  formData.maintenanceType = '定期维护'
  formData.nextMaintenanceDate = ''
  formData.isStatus = 1
}

// 处理对话框关闭
const handleDialogClosed = () => {
  formRef.value?.resetFields()
  resetFormData()
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      // 根据dialogType判断是新增还是编辑
      const api = dialogType.value === 'add' 
        ? '/api/ToolingFixtureLedgerService/Add/AddToolingFixtureLedger'
        : '/api/ToolingFixtureLedgerService/Update/UpdateToolingFixtureLedger'
      
      http.post(api, formData).then(res => {
        ElMessage.success(dialogType.value === 'add' ? '添加成功' : '修改成功')
        dialogVisible.value = false
        getTableData() // 刷新表格数据
      }).catch(err => {
        ElMessage.error(dialogType.value === 'add' ? '添加失败' : '修改失败')
      })
    }
  })
}

// 删除处理
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    '确定要删除该工装夹具吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    http.post('/api/ToolingFixtureLedgerService/Delete/DeleteToolingFixtureLedger', { id: row.id }).then((res: any) => {
      ElMessage.success('删除成功')
      getTableData() // 刷新表格数据
    }).catch((err: any) => {
      ElMessage.error('删除失败')
    })
  })
}

// 查看对话框相关
const viewDialogVisible = ref(false)
const viewForm = reactive({
  code: '',
  name: '',
  type: '',
  model: '',
  brand: '',
  inventoryQuantity: 0,
  availableQuantity: 0,
  maintenanceType: '',
  nextMaintenanceDate: '',
  isStatus: 1
})

// 打开查看对话框
const openViewDialog = (row: any) => {
  Object.assign(viewForm, row)
  viewDialogVisible.value = true
}

// 添加选中行数据的ref
const selectedRows = ref<TableItem[]>([])

// 处理表格选择变化
const handleSelectionChange = (selection: TableItem[]) => {
  selectedRows.value = selection || []
}

// 修改导出Excel功能
const exportToExcel = () => {
  // 如果没有选中任何行，提示用户
  if (!selectedRows.value || selectedRows.value.length === 0) {
    ElMessage.warning('请至少选择一条数据进行导出')
    return
  }

  // 准备导出数据
  const exportData = selectedRows.value.map(item => ({
    '编号': item.code || '',
    '名称': item.name || '',
    '品牌': item.brand || '',
    '型号': item.model || '',
    '类型': item.type || '',
    '库存数量': item.inventoryQuantity || 0,
    '可用数量': item.availableQuantity || 0,
    '保养维护类型': item.maintenanceType || '',
    '下次保养日期': item.nextMaintenanceDate ? item.nextMaintenanceDate.substring(0, 10) : '',
    '状态': getStatusText(item.isStatus)
  }))

  // 创建工作簿
  const worksheet = XLSX.utils.json_to_sheet(exportData)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, '工装夹具清单')

  // 设置列宽
  const columnWidths = [
    { wch: 10 }, // 编号
    { wch: 20 }, // 名称
    { wch: 15 }, // 品牌
    { wch: 15 }, // 型号
    { wch: 15 }, // 类型
    { wch: 10 }, // 库存数量
    { wch: 10 }, // 可用数量
    { wch: 15 }, // 保养维护类型
    { wch: 15 }, // 下次保养日期
    { wch: 10 }  // 状态
  ]
  worksheet['!cols'] = columnWidths

  // 生成Excel文件
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
  
  // 获取当前时间作为文件名的一部分
  const now = new Date()
  const timestamp = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}_${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}${String(now.getSeconds()).padStart(2, '0')}`
  
  // 下载文件，文件名包含选中的数量信息
  const fileName = selectedRows.value.length === tableData.value.length 
    ? `工装夹具清单_全部_${timestamp}.xlsx` 
    : `工装夹具清单_已选${selectedRows.value.length}条_${timestamp}.xlsx`
  
  saveAs(blob, fileName)
}

const showSearchForm = ref(true)

onMounted(() => {
  getTableData()
})
</script>

<style lang="scss" scoped>
.tooling-ledger-container {
  padding: 15px;
  background: #f6f8fa;
  position: relative;

  .search-form {
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;

    .el-form {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      
      .el-form-item {
        margin-bottom: 0;
        margin-right: 0;
        
        :deep(.el-form-item__content) {
          margin-left: 0 !important;
        }

        :deep(.el-input) {
          width: 200px;
        }

        :deep(.el-select) {
          width: 200px;
        }
      }
    }
  }

  .table-operations {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;

    .el-button {
      .el-icon {
        margin-right: 4px;
      }

      &:disabled {
        cursor: not-allowed;
        opacity: 0.7;
      }
    }
  }

  .table-wrapper {
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    position: static;
    
    .ledger-table {
      // 设置表格边框和圆角
      :deep(.el-table__inner-wrapper) {
        border-radius: 4px;
        overflow: hidden;
      }

      // 设置表格hover效果
      :deep(.el-table__row:hover) {
        td {
          background-color: #f5f7fa !important;
        }
      }

      // 设置斑马纹颜色
      :deep(.el-table__row--striped) {
        td {
          background-color: #fafafa;
        }
      }

      // 设置操作列样式
      :deep(.operation-link) {
        font-size: 13px;
        
        & + .el-divider {
          margin: 0 8px;
        }
      }

      // 设置链接列样式
      :deep(.el-link) {
        font-size: 13px;
      }

      // 设置状态标签样式
      :deep(.el-tag) {
        border-radius: 2px;
      }
    }

    .table-header-actions-flex {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 4px;
    }
    .table-header-actions {
      display: flex;
      gap: 8px;
    }
  }

  .full-width-table .el-table {
    width: 100% !important;
    min-width: 0 !important;
  }

  .ledger-table ::v-deep .el-table__header th {
    font-weight: bold;
    background: #f4f6fa;
  }

  .filter-btns {
    text-align: right;
  }

  .pager-wrapper {
    margin-top: 15px;
    padding: 0 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    :deep(.el-pagination) {
      padding: 0;
      margin: 0;
      font-weight: normal;
      
      .el-pagination__total {
        margin-right: 16px;
      }
      
      .el-pagination__sizes {
        margin-right: 16px;
      }
    }
  }

  .tooling-dialog {
    :deep(.el-dialog__body) {
      padding: 15px 25px;
    }

    .tooling-form {
      .form-section {
        margin-bottom: 15px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }

      .form-section-row {
        display: flex;
        gap: 20px;
        margin-bottom: 15px;

        .form-section-col {
          flex: 1;
        }
      }

      .section-title {
        font-size: 14px;
        font-weight: 500;
        color: #1f2f3d;
        margin-bottom: 12px;
        padding-left: 8px;
        border-left: 3px solid #409eff;
      }

      .section-content {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 4px;

        .el-row {
          margin-bottom: 15px;
          
          &:last-child {
            margin-bottom: 0;
          }
        }

        .el-form-item {
          margin-bottom: 15px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      :deep(.el-form-item) {
        margin-bottom: 0;
        
        .el-form-item__label {
          font-weight: normal;
          color: #606266;
          padding-right: 8px;
          line-height: 32px;
        }
        
        .el-form-item__content {
          line-height: 32px;

          .el-input,
          .el-select,
          .el-date-picker,
          .el-input-number {
            width: 100%;
          }
        }

        .status-group {
          display: flex !important;
          flex-wrap: nowrap !important;
          gap: 15px;
          justify-content: flex-start;

          .el-radio {
            margin-right: 0;
            margin-left: 0;
          }
        }

        .el-input-group__append {
          padding: 0 10px;
          background-color: var(--el-fill-color-blank);

          .el-switch {
            --el-switch-on-color: var(--el-color-primary);
            height: 28px;
            line-height: 28px;
          }
        }
      }

      .full-width {
        width: 100%;
      }
    }

    .dialog-footer {
      padding-top: 15px;
      text-align: right;
      border-top: 1px solid #dcdfe6;
      
      .el-button + .el-button {
        margin-left: 12px;
      }
    }

    :deep(.el-switch) {
      margin-right: 8px;
      
      &.is-disabled {
        opacity: 0.7;
      }
    }
  }
}
</style>